<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 600px;
            overflow: hidden;
            background-color: brown;
        }
        .big {
            height: 100%;
        }
        .shield {
            width: 440px;
            margin: 100px auto;
        }
        .shield img {
            transform: translate(100px,120px) rotate(45deg);
            transition: all 4s linear;
        }
        .shield:hover img {
            transform: none;
        }
    </style>
</head>
<body>
<div class="big">
    <div class="shield">
        <img src="img/shield_1_01.png" alt="">
        <img src="img/shield_1_02.png" alt="">
        <img src="img/shield_1_03.png" alt="">
        <img src="img/shield_1_04.png" alt="">
        <img src="img/shield_1_05.png" alt="">
        <img src="img/shield_1_06.png" alt="">
        <img src="img/shield_1_07.png" alt="">
        <img src="img/shield_1_08.png" alt="">
        <img src="img/shield_1_09.png" alt="">
    </div>
</div>
</body>
</html>